<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜单节点管理</title>
    <link rel="stylesheet" href="/static/admin/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/static/admin/css/global.css" media="all">
    <link rel="stylesheet" href="/static/admin/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/admin/css/table.css"/>
    <link rel="stylesheet" href="/static/admin/js/plugins/zTree/zTreeStyle.css" type="text/css">
    <style>
        .site-table.table-hover tr td:nth-child(2){
            text-align: left;
        }
    </style>
</head>

<body>
<div class="admin-main">

    <blockquote class="layui-elem-quote">
        <form class="layui-form">
            <div class="layui-form">
                <div class="layui-inline">
                    <button id="add" type="button" class="layui-btn"><i class="layui-icon">&#xe61f;</i>添加</button>
                </div>
            </div>
        </form>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>菜单节点管理</legend>
        <div class="layui-field-box">
            <table class="site-table table-hover">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>菜单名</th>
                    <th>权限链接</th>
                    <th>菜单</th>
                    <th>图标</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="con">
                {foreach name="nodes" item="v"}
                <tr>
                    <td>{$v.id}</td>
                    <td>{$v.title}</td>
                    <td>{$v.href}</td>
                    <td>{$v.is_menu}</td>
                    <td><i class="fa {$v.icon}"></i></td>
                    <td>
                        <button class="layui-btn layui-btn-small" onclick="javascript:edit({$v.id},'{$v.title}','{$v.href}','{$v.is_menu}','{$v.icon}',0)"><i class="layui-icon">&#xe642;</i></button>
                        <button class="layui-btn layui-btn-small" onclick="javascript:delData({$v.id})"><i class="layui-icon"></i></button>
                    </td>
                </tr>
                {foreach name="v.children" item="v1"}
                <tr>
                    <td>{$v1.id}</td>
                    <td>| --  {$v1.title}</td>
                    <td>{$v1.href}</td>
                    <td>{$v1.is_menu}</td>
                    <td><i class="fa {$v1.icon}"></i></td>
                    <td>
                        <button class="layui-btn layui-btn-small" onclick="javascript:edit({$v1.id},'{$v1.title}','{$v1.href}','{$v1.is_menu}','{$v1.icon}', {$v.id})"><i class="layui-icon">&#xe642;</i></button>
                        <button class="layui-btn layui-btn-small" onclick="javascript:delData({$v1.id})"><i class="layui-icon"></i></button>
                    </td>
                </tr>
                {foreach name="v1.children" item="v2"}
                <tr>
                    <td>{$v2.id}</td>
                    <td>| --  --  {$v2.title}</td>
                    <td>{$v2.href}</td>
                    <td>{$v2.is_menu}</td>
                    <td><i class="fa {$v2.icon}"></i></td>
                    <td>
                        <button class="layui-btn layui-btn-small" onclick="javascript:edit({$v2.id},'{$v2.title}','{$v2.href}','{$v2.is_menu}','{$v2.icon}', {$v1.id})"><i class="layui-icon">&#xe642;</i></button>
                        <button class="layui-btn layui-btn-small" onclick="javascript:delData({$v2.id})"><i class="layui-icon"></i></button>
                    </td>
                </tr>
                {/foreach}
                {/foreach}
                {/foreach}
                </tbody>
            </table>

        </div>
    </fieldset>
</div>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/static/admin/js/layeralert.js"></script>

<script>
    layui.config({
        base: '/static/admin/plugins/layui/modules/'
    });
    var layer;
    layui.use(['layer', 'form'], function () {
        layer = layui.layer;}
    );
    //删除
    function delData(id) {
        layer.confirm('确认删除此信息' + '?', {icon: 3, title: '提示'}, function (index) {
            $.ajax({
                type: "POST",
                url: './del',
                data:  {id:id},
                async: true,
                beforeSend: function () {
                    jz = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                },
                error: function (request) {
                    layer.close(jz);
                    layer.alert('网络错误',{icon:2}, function(index){
                        layer.close(index);
                    });
                },
                success: function (data) {
                    layer.close(jz);
                    //关闭加载层
                    if (data.code == 1) {
                        layer.msg(data.msg, {
                            icon: 1,
                            time: 1500
                        });
                        window.location.reload();
                    } else if (data.code == -1) {
                        window.location.href = '/login/login';
                    } else {
                        layer.alert(data.msg);
                    }
                }
            });

        })
    }

    //添加
    $('#add').click(function () {
        var content = "<form class='layui-form' style='margin-top:30px;'>"
                +"<div class='layui-form-item'><label class='layui-form-label'>菜单名</label><div class='layui-input-inline'><input type='text' id='title' placeholder='请输入菜单名' autocomplete='off' class='layui-input'></div><div class='layui-form-mid layui-word-aux'>长度1~20位</div></div>"
                +"<div class='layui-form-item'><label class='layui-form-label'>链接</label><div class='layui-input-inline'><input type='text' id='href' placeholder='请输入链接' autocomplete='off' class='layui-input' value='/admin/'></div></div>"
                +"<div class='layui-form-item'><label class='layui-form-label'>父级ID</label><div class='layui-input-inline'><input type='number' id='typeid' placeholder='请输入父级ID' autocomplete='off' class='layui-input' value='0'></div></div>"
                +"<div class='layui-form-item'><label class='layui-form-label'>是否为菜单</label><div class='layui-input-inline'><input type='number' id='is_menu' class='layui-input' value='1'></div><div class='layui-form-mid layui-word-aux'>1为节点，2为菜单</div></div>"
                +"<div class='layui-form-item'><label class='layui-form-label'>图标</label><div class='layui-input-inline'><input type='text' id='icon' class='layui-input' value='fa-'></div></div>"
                +"</form>";
        alertFormNotLoad(layer, '添加菜单', content, ['500px', '400px'], '/menu/add', ['title', 'href', 'typeid', 'is_menu', 'icon']);
    });

    //修改
    function edit(id, title, href, isMenu, icon, typeid){
        var content = "<form class='layui-form' style='margin-top:30px;'>"
                +"<div class='layui-form-item'><label class='layui-form-label'>菜单名</label><div class='layui-input-inline'><input type='text' id='title' placeholder='请输入菜单名' value='"+title+"' autocomplete='off' class='layui-input'></div><div class='layui-form-mid layui-word-aux'>长度1~20位</div></div>"
                +"<div class='layui-form-item'><label class='layui-form-label'>链接</label><div class='layui-input-inline'><input type='text' id='href' placeholder='请输入链接' class='layui-input' value='"+href+"'></div></div>"
                +"<div class='layui-form-item'><label class='layui-form-label'>父级ID</label><div class='layui-input-inline'><input type='number' id='typeid' placeholder='请输入父级ID' class='layui-input' value='"+typeid+"'></div></div>"
                +"<div class='layui-form-item'><label class='layui-form-label'>是否为菜单</label><div class='layui-input-inline'><input type='number' id='is_menu' class='layui-input' value='"+isMenu+"'></div><div class='layui-form-mid layui-word-aux'>1为节点，2为菜单</div></div>"
                +"<div class='layui-form-item'><label class='layui-form-label'>图标</label><div class='layui-input-inline'><input type='text' id='icon' class='layui-input' value='"+icon+"'></div></div>"
                +"<input type='hidden' id='id' value='"+id+"'>"
                +"</form>";
        alertFormNotLoad(layer, '修改菜单', content, ['500px', '400px'], '/menu/edit', ['title', 'href', 'typeid', 'is_menu', 'icon', 'id']);
    }



</script>
</body>

</html>
